<template>
	<view class="page">
		<view class="physical padding" v-for="item in list" :key="item.id" v-if="pagination.total > 0 ">
			<view class="physical_header">
				<view class="physical_header_store">
					设备编号：
					<view style="font-size: 14px;">{{item.code}}</view>
				</view>
			</view>
			<view class="physical_footer">
				<view class="physical_footer_time text-gray text-md block">
					功能:
					<wd-tag >{{item.compent}}</wd-tag>
				</view>
				<view class="physical_footer_time text-gray text-md">
					开始时间: {{item.start_time}}
				</view>
				<view class="physical_footer_time text-gray text-md">
				    结束时间: {{item.end_time}}
				</view>
				<view class="physical_footer_time text-gray text-md">
					暂停次数: {{item.pause_times}}
				</view>
				<view class="physical_footer_time text-gray text-md">
					是否异常: {{item.is_error || "否" }}
				</view>
				<view class="physical_footer_time text-gray text-md">
					异常编码: {{item.error_code || "无"}}
				</view>
				<view class="physical_footer_time text-gray text-md">
					会员编号: {{item.vip_code}}
				</view>
			</view>

		</view>
		<view class="empty" v-if="pagination.total == 0">
			<wd-status-tip image="content" tip="暂无消费记录" />
		</view>
		<wd-pagination v-model="pagination.page" :total="pagination.total" @change="handleChange" />
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import apiUser from "@/api/user.js"
	let openId = null
	const list = ref([])

	const pagination = reactive({
		page: 1,
		pagesize: 10,
		total: 0
	})

	onLoad((e)=>{
		openId = e.open_id
		pagination.page = 1
	})



	const fetchData = () => {
		list.value = []
		apiUser.buyList({
			pageNo: pagination.page,
			pageSize: pagination.pagesize,
			open_id: openId
		}).then(res => {
			uni.stopPullDownRefresh()
			pagination.total = res.total
			list.value = res.records
		})
	}


	onShow(()=>{
		fetchData()
	})


	onPullDownRefresh(()=>{
		pagination.page = 1
		fetchData()
	})



	const handleChange = (e) =>{
		pagination.page = e.value
		fetchData()
	}

</script>

<style lang="scss" scoped>
	.relative {
		position: relative;
	}

	.h-full {
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.btn {
		margin-top: 20rpx;
		width: 180rpx;
		margin-left: 80%;
	}

  .empty {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

	.add_btn {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
		color: #fff;
	}

	.physical {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 4px 0px #efefef;
		padding: 40rpx;
		color: #666;
		overflow: hidden;

		&_header {
			border-bottom: 1px solid #efefef;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_store {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}

			&_pauseTimes {
				font-size: 12px;
				color: #f59e0b;

			}
		}

		&_body {
			padding: 40rpx 0;
			border-bottom: 1px solid #efefef;
			font-size: 12px;

			&_name {
				font-size: 16px;
				color: #f43f5e;
				font-weight: 600;
				display: inline-block;
			}
		}

		&_footer {
			font-size: 12px;
			border-bottom: 1px solid #efefef;
			padding-bottom: 8rpx;

			&_time {
				padding-top: 10rpx;
			}

			&_storeAddress {
				padding: 10rpx 0;
			}
		}

		&_actions {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: end;
			color: #00acac;
		}
	}
</style>
